<template>
  <div class="test-import">
    <h2>RBO工作流设计器导入测试</h2>

    <div class="test-section">
      <h3>默认导入测试</h3>
      <div v-if="defaultImportSuccess" class="success">✅ 默认导入成功</div>
      <div v-else class="error">❌ 默认导入失败</div>
    </div>

    <div class="test-section">
      <h3>命名导入测试</h3>
      <div v-if="namedImportSuccess" class="success">✅ 命名导入成功</div>
      <div v-else class="error">❌ 命名导入失败</div>
    </div>

    <div class="test-section">
      <h3>组件渲染测试</h3>
      <div class="component-test">
        <RboWorkflowDesigner ref="workflowRef" />
      </div>
    </div>

    <div class="test-section">
      <h3>方法调用测试</h3>
      <Button @click="testGetData" type="primary"> 测试 getData 方法 </Button>
      <div v-if="getDataResult" class="result">
        <pre>{{ JSON.stringify(getDataResult, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Button } from 'ant-design-vue';

// 测试默认导入
let defaultImportSuccess = ref(false);
let namedImportSuccess = ref(false);
let getDataResult = ref(null);

const workflowRef = ref();

// 测试导入
onMounted(() => {
  try {
    // 测试默认导入
    const RboWorkflowDesigner = require('./index').default;
    defaultImportSuccess.value = !!RboWorkflowDesigner;
    console.log('默认导入成功:', RboWorkflowDesigner);
  } catch (error) {
    console.error('默认导入失败:', error);
    defaultImportSuccess.value = false;
  }

  try {
    // 测试命名导入
    const { RboWorkflowDesignerV1, RboWorkflowDesignerV2 } = require('./index');
    namedImportSuccess.value = !!(
      RboWorkflowDesignerV1 && RboWorkflowDesignerV2
    );
    console.log('命名导入成功:', {
      RboWorkflowDesignerV1,
      RboWorkflowDesignerV2,
    });
  } catch (error) {
    console.error('命名导入失败:', error);
    namedImportSuccess.value = false;
  }
});

// 测试 getData 方法
const testGetData = () => {
  try {
    if (workflowRef.value) {
      const data = workflowRef.value.getData();
      getDataResult.value = data;
      console.log('getData 调用成功:', data);
    } else {
      console.error('workflowRef 未找到');
    }
  } catch (error) {
    console.error('getData 调用失败:', error);
    getDataResult.value = { error: error.message };
  }
};
</script>

<style lang="less" scoped>
.test-import {
  padding: 24px;

  h2 {
    color: #1890ff;
    margin-bottom: 24px;
  }

  .test-section {
    margin-bottom: 32px;
    padding: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;

    h3 {
      margin-bottom: 16px;
      color: #333;
    }

    .success {
      color: #52c41a;
      font-weight: 500;
    }

    .error {
      color: #ff4d4f;
      font-weight: 500;
    }

    .component-test {
      height: 400px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      overflow: hidden;
    }

    .result {
      margin-top: 16px;

      pre {
        background: #f5f5f5;
        padding: 12px;
        border-radius: 4px;
        font-size: 12px;
        overflow: auto;
        max-height: 200px;
      }
    }
  }
}
</style>
